<template>
  <div class="card">
    <div class="m-card">
      <div class="tj" style="margin-top: 50px">
        <h3 class="text">推荐</h3>
        <ul class="m-ul">
          <li><a href="#">推荐歌手</a></li>
          <li><a href="#">入驻歌手</a></li>
        </ul>
      </div>
      <div class="hy">
        <h3 class="text">华语</h3>
        <ul class="m-ul">
          <li><a href="#">华语男歌手</a></li>
          <li><a href="#">华语女歌手</a></li>
          <li><a href="#">华语组合/乐队</a></li>
        </ul>
      </div>
      <div class="om">
        <h3 class="text">欧美</h3>
        <ul class="m-ul">
          <li><a href="#">欧美男歌手</a></li>
          <li><a href="#">欧美女歌手</a></li>
          <li><a href="#">欧美组合/乐队</a></li>
        </ul>
      </div>
      <div class="rb">
        <h3 class="text">日本</h3>
        <ul class="m-ul">
          <li><a href="#">日本男歌手</a></li>
          <li><a href="#">日本女歌手</a></li>
          <li><a href="#">日本组合/乐队</a></li>
        </ul>
      </div>
      <div class="hg">
        <h3 class="text">韩国</h3>
        <ul class="m-ul">
          <li><a href="#">韩国男歌手</a></li>
          <li><a href="#">韩国女歌手</a></li>
          <li><a href="#">韩国组合/乐队</a></li>
        </ul>
      </div>
      <div class="qt">
        <h3 class="text">其他</h3>
        <ul class="m-ul">
          <li><a href="#">其他男歌手</a></li>
          <li><a href="#">其他女歌手</a></li>
          <li><a href="#">其他组合/乐队</a></li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { reqSingerList } from "@/api";
export default {
  name: "Recommend",

  data() {
    return {};
  },
  methods: {},
  mounted() {
    // const singerList = async () => {
    //   const result = await reqSingerList();
    //   console.log("result", result);
    // };
  },
};
</script>

<style lang="less" scoped>
.card {
  height: auto;
  display: inline-block;
  .m-card {
    font-size: 12px;
    border: 1px solid gainsboro;
    // background-color: rgb(174, 99, 215);
    width: 180px;
    div {
      margin: 26px 10px;
      border-bottom: 1px solid rgb(214, 205, 205);
      h3 {
        font-size: 16px;
        font-family: Microsoft Yahei;
        padding-left: 20px;
        padding-bottom: 3px;
        margin-bottom: 0px;
      }
      ul {
        margin-top: 0px;
        padding: 0px 33px;

        li {
          height: 30px;
          line-height: 30px;
          color: #b0b0b0;
          a {
            color: #333333;
            text-decoration: none;
          }
          a:hover {
            text-decoration: underline;
            color: #333333 !important;
          }
        }
      }
    }
  }
}
</style>